<template>
  <drawer-or-dialog
    :title="title"
    v-model="visible"
    v-if="visible"
    width="50%"
    @update:model-value="handleClose"
  >
    <template #content>
      <slot name="alert"></slot>
      <el-form
        ref="taskFormRef"
        :model="auditForm"
        label-width="90px"
        :label-position="isMobile() ? 'top' : 'left'"
        :size="isMobile() ? 'small' : 'default'"
      >
        <slot
          :formModel="auditForm"
          name="form"
        ></slot>
        <el-form-item
          v-if="adviceStatus === '1'"
          :label="commentLabel"
          prop="comment"
          :rules="[{ required: true, message: $t('workflow.flowDetail.enterOpinions'), trigger: 'blur' }]"
        >
          <el-input
            v-model="auditForm.comment"
            type="textarea"
            :rows="5"
            :placeholder="$t('workflow.flowDetail.enterOpinions')"
          />
        </el-form-item>
        <el-form-item
          v-if="signatureStatus === '1'"
          :label="$t('workflow.flowDesign.approvalSignPadStatus')"
          prop="signatureUrl"
          :rules="[{ required: true, message: $t('workflow.flowDetail.enterSign'), trigger: 'blur' }]"
        >
          <div class="signature-wrap">
            <AuditSignature @save="handleEnterSign" />
          </div>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <el-button
          icon="ele-Close"
          @click="handleClose"
          size="default"
        >
          {{ $t("formI18n.all.cancel") }}
        </el-button>
        <el-button
          v-re-click
          icon="ele-Check"
          type="primary"
          size="default"
          @click="handleSubmit"
        >
          {{ $t("formI18n.all.confirm") }}
        </el-button>
      </span>
    </template>
  </drawer-or-dialog>
</template>
<script setup lang="ts">
import { ref, watch, nextTick } from "vue";
import type { FormInstance } from "element-plus";
import { cloneDeep } from "lodash-es";
import AuditSignature from "./AuditSignature.vue";
import { handleProcessFunc } from "@/views/workflow/task/process/hooks/useHandleProcess";
import DrawerOrDialog from "./DrawerOrDialog.vue";
import { isMobile } from "@/utils/other";

isMobile();

const props = defineProps({
  commentLabel: {
    type: String,
    default: ""
  },
  title: {
    type: String,
    default: ""
  },
  defaultForm: {
    type: Object,
    default: () => {}
  },
  show: {
    type: Boolean,
    default: false
  }
});

const visible = ref(false);

watch(
  () => props.show,
  val => {
    visible.value = val;
  }
);

const auditForm = ref<any>({
  comment: "",
  signatureUrl: ""
});

const taskFormRef = ref<FormInstance>();

watch(
  () => props.defaultForm,
  val => {
    const result = cloneDeep(val);
    if (auditForm.value.comment) {
      result.comment = auditForm.value.comment;
    }
    result.signatureUrl = auditForm.value.signatureUrl;
    auditForm.value = result;
    nextTick(() => {
      if (taskFormRef.value) {
        taskFormRef.value!.validate();
      }
    });
  },
  {
    immediate: true,
    deep: true
  }
);

const emit = defineEmits(["submit", "update:show"]);

const handleSubmit = () => {
  taskFormRef.value!.validate(valid => {
    if (valid) {
      emit("submit", auditForm.value);
      handleClose();
    }
  });
};

const handleEnterSign = (val: string) => {
  auditForm.value.signatureUrl = val;
  taskFormRef.value!.validate();
};

const handleClose = () => {
  emit("update:show", false);
  visible.value = false;
};

const { adviceStatus, signatureStatus } = handleProcessFunc;
</script>
<style scoped lang="scss">
.signature-wrap {
  width: 100%;
}
</style>
